<%--
  首个报表
  User: Ivan
  Date: 2019-09-03 12:47
--%>
<style type="text/css">
tr, th, td {
    text-align: center;
}
</style>

<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${SYS_QUERY_PATH}" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel"/>
            <g:hiddenField name="SYS_QUERY_NAME" value="${SYS_QUERY_NAME}"/>
            <label>开始日期<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="startTime" class="form-control" data-rule="required"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd"
                   size="11" id="start-date-input" readonly value="${startTime}"/>&nbsp;
            <label>结束日期<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="endTime" class="form-control" data-rule="required"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd"
                   size="11" id="end-date-input" readonly value="${endTime}"/>&nbsp;
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <button type="button" class="btn-blue"
                    onclick="javascript:bjuiExportExl('#pagerForm', '${request.getContextPath()}/FirstReport/exportExcel')"
                    data-icon="file-excel-o" title="导出Excel">导出</button>
        </div>
    </form>
</div>

<div class="bjui-pageContent tableContent">
<g:if test="${report_011.size() > 0}">
    <div style="margin:0px auto; width:100%;">
        <table class="table table-bordered table-hover table-striped table-top" data-selected-multi="true" data-toggle="tablefixed" data-width="100%">
            <thead>
            <tr>
                <th width="50">NO.</th>
                <g:each in="${tableHeadList}" status="i" var="headInstance">
                    <g:if test="${headInstance != 'GD_STEP_NAME'}">
                        <th><g:message code="${headInstance}" default="${headInstance}"/></th>
                    </g:if>
                </g:each>
            </tr>
            </thead>
            <tbody>
            <g:each in="${report_011}" status="i" var="dataInstance">
                <tr data-id="data">
                    <td>${i + 1}</td>
                    <g:each in="${tableHeadList}" status="j" var="headInstance">
                        <g:if test="${headInstance == 'GD_STEP_DESC'}">
                            <td>${dataInstance.GD_STEP_DESC}</td>
                        </g:if>
                        <g:elseif test="${headInstance == 'WAIT_QTY'}">
                            <td>
                                <a href="${request.getContextPath()}/FirstReport/firstReportDetail?clazz=WAIT_QTY&dgStepName=<%=dataInstance.GD_STEP_NAME%>&dgStepDesc=<%=dataInstance.GD_STEP_DESC%>&startTime=<%=params.startTime%>&endTime=<%=params.endTime%>"
                                   data-toggle="navtab" data-id="dialog-normal"
                                   data-options="{id:'firstReportDetail', title:'${dataInstance.GD_STEP_DESC}等待明细'}">
                                    ${dataInstance.WAIT_QTY}
                                </a>
                            </td>
                        </g:elseif>
                        <g:elseif test="${headInstance == 'WIP_QTY'}">
                            <td>
                                <a href="${request.getContextPath()}/FirstReport/firstReportDetail?clazz=WIP_QTY&dgStepName=<%=dataInstance.GD_STEP_NAME%>&dgStepDesc=<%=dataInstance.GD_STEP_DESC%>&startTime=<%=params.startTime%>&endTime=<%=params.endTime%>"
                                   data-toggle="navtab" data-id="dialog-normal"
                                   data-options="{id:'firstReportDetail', title:'${dataInstance.GD_STEP_DESC}在制明细'}">
                                    ${dataInstance.WIP_QTY}
                                </a>
                            </td>
                        </g:elseif>
                        <g:elseif test="${headInstance == 'IN_QTY'}">
                            <td>
                                <a href="${request.getContextPath()}/FirstReport/firstReportDetail?clazz=IN_QTY&dgStepName=<%=dataInstance.GD_STEP_NAME%>&dgStepDesc=<%=dataInstance.GD_STEP_DESC%>&startTime=<%=params.startTime%>&endTime=<%=params.endTime%>"
                                   data-toggle="navtab" data-id="dialog-normal"
                                   data-options="{id:'firstReportDetail', title:'${dataInstance.GD_STEP_DESC}进站明细'}">
                                    ${dataInstance.IN_QTY}
                                </a>
                            </td>
                        </g:elseif>
                        <g:elseif test="${headInstance == 'RUN_QTY'}">
                            <td>
                                <a href="${request.getContextPath()}/FirstReport/firstReportDetail?clazz=RUN_QTY&dgStepName=<%=dataInstance.GD_STEP_NAME%>&dgStepDesc=<%=dataInstance.GD_STEP_DESC%>&startTime=<%=params.startTime%>&endTime=<%=params.endTime%>"
                                   data-toggle="navtab" data-id="dialog-normal"
                                   data-options="{id:'firstReportDetail', title:'${dataInstance.GD_STEP_DESC}站内明细'}">
                                    ${dataInstance.RUN_QTY}
                                </a>
                            </td>
                        </g:elseif>
                        <g:elseif test="${headInstance == 'OUT_QTY'}">
                            <td>
                                <a href="${request.getContextPath()}/FirstReport/firstReportDetail?clazz=OUT_QTY&dgStepName=<%=dataInstance.GD_STEP_NAME%>&dgStepDesc=<%=dataInstance.GD_STEP_DESC%>&startTime=<%=params.startTime%>&endTime=<%=params.endTime%>"
                                   data-toggle="navtab" data-id="dialog-normal"
                                   data-options="{id:'firstReportDetail', title:'${dataInstance.GD_STEP_DESC}出站明细'}">
                                    ${dataInstance.OUT_QTY}
                                </a>
                            </td>
                        </g:elseif>
                        <g:elseif test="${headInstance == 'YIELD'}">
                            <td>${dataInstance.YIELD}</td>
                        </g:elseif>
                        <g:elseif test="${headInstance == 'HOLD_QTY'}">
                            <td>
                                <a href="${request.getContextPath()}/FirstReport/firstReportDetail?clazz=HOLD_QTY&dgStepName=<%=dataInstance.GD_STEP_NAME%>&dgStepDesc=<%=dataInstance.GD_STEP_DESC%>&startTime=<%=params.startTime%>&endTime=<%=params.endTime%>"
                                   data-toggle="navtab" data-id="dialog-normal"
                                   data-options="{id:'firstReportDetail', title:'${dataInstance.GD_STEP_DESC}HOLD明细'}">
                                    ${dataInstance.HOLD_QTY}
                                </a>
                            </td>
                        </g:elseif>
                        <g:elseif test="${headInstance == 'REWORK_QTY'}">
                            <td>
                                <a href="${request.getContextPath()}/FirstReport/firstReportDetail?clazz=REWORK_QTY&dgStepName=<%=dataInstance.GD_STEP_NAME%>&dgStepDesc=<%=dataInstance.GD_STEP_DESC%>&startTime=<%=params.startTime%>&endTime=<%=params.endTime%>"
                                   data-toggle="navtab" data-id="dialog-normal"
                                   data-options="{id:'firstReportDetail', title:'${dataInstance.GD_STEP_DESC}返工明细'}">
                                    ${dataInstance.REWORK_QTY}
                                </a>
                            </td>
                        </g:elseif>
                        <g:elseif test="${headInstance == 'REWORK_YIELD'}">
                            <td>${dataInstance.REWORK_YIELD}</td>
                        </g:elseif>
                        <g:elseif test="${headInstance == 'SCRAP_QTY'}">
                            <td>
                                <a href="${request.getContextPath()}/FirstReport/firstReportDetail?clazz=SCRAP_QTY&dgStepName=<%=dataInstance.GD_STEP_NAME%>&dgStepDesc=<%=dataInstance.GD_STEP_DESC%>&startTime=<%=params.startTime%>&endTime=<%=params.endTime%>"
                                   data-toggle="navtab" data-id="dialog-normal"
                                   data-options="{id:'firstReportDetail', title:'${dataInstance.GD_STEP_DESC}报废明细'}">
                                    ${dataInstance.SCRAP_QTY}
                                </a>
                            </td>
                        </g:elseif>
                        <g:elseif test="${headInstance == 'SCRAP_YIELD'}">
                            <td>${dataInstance.SCRAP_YIELD}</td>
                        </g:elseif>
                    </g:each>
                </tr>
            </g:each>
            <tr>
                <td colspan="2">合计</td>
                <td>${qtyList[0]}</td>
                <td>${qtyList[1]}</td>
                <td>${qtyList[2]}</td>
                <td>${qtyList[3]}</td>
                <td>${qtyList[4]}</td>
                <td>${qtyList[5]}</td>
                <td>${qtyList[6]}</td>
                <td>${qtyList[7]}</td>
                <td>${qtyList[8]}</td>
                <td>${qtyList[9]}</td>
                <td>${qtyList[10]}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <div style="width:100%;height:450px;margin:20px auto" id="dataChart"></div>

    <div style="width:100%;height:450px;margin:20px auto" id="yieldByDayChart"></div>

    <div style="width:100%;height:450px;margin:20px auto" id="reworkYieldByDayChart"></div>

    <div style="width:100%;height:450px;margin:20px auto" id="scrapYieldByDayChart"></div>
    </div>
    <g:render template="../template/echarts"/>
    <script type="text/javascript">
        /**
         * 数据分析图
         * @Author Ivan
         * @Date 2019/6/24
         */
        var dataChart = function () {
            var myChart = echarts.init(document.getElementById("dataChart"));
            var stepList = [];
            var wipQty = [];
            var inQty = [];
            var runQty = [];
            var outQty = [];
            var yield = [];
            var reworkYield = [];
            var scrapYield = [];
            <g:each in="${report_011}" status="i" var="dataInstance">
            stepList.push("${dataInstance.GD_STEP_DESC}");
            wipQty.push(${dataInstance.WIP_QTY});
            inQty.push(${dataInstance.IN_QTY});
            runQty.push(${dataInstance.RUN_QTY});
            outQty.push(${dataInstance.OUT_QTY});
            yield.push(${dataInstance.YIELD});
            reworkYield.push(${dataInstance.REWORK_YIELD});
            scrapYield.push(${dataInstance.SCRAP_YIELD});
            </g:each>
            var option = {
                title: {
                    text: '数据分析图'
                },
                legend: {
                    data: ['在制数', /*'进站数',*/ '站内数', '出站数', '达成率', '返工率', '报废率']
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    name: '工段',
                    show: true,
                    type: 'category',
                    data: stepList,
                    axisLabel: {
                        rotate: 45,
                        show: true,
                        textStyle: {
                            color: '#3A82B9'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3A82B9',
                            width: 2
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        show: true,
                        name: '数量',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#3A82B9',
                                width: 2
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#3A82B9'
                            }
                        },
                        splitLine: {
                            show: true
                        },
                        splitArea: {
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        name: '比率',
                        show: true,
                        interval: 5,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#3A82B9',
                                width: 2
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#3A82B9'
                            },
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: '在制数',
                        type: 'bar',
                        data: wipQty,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'inside',
                                    textStyle: {
                                        color: 'black'
                                    }
                                }
                            }
                        }
                    },
                    // {
                    //     name: '进站数',
                    //     type: 'bar',
                    //     data: inQty,
                    //     itemStyle: {
                    //         normal: {
                    //             label: {
                    //                 show: true,
                    //                 position: 'inside',
                    //                 textStyle: {
                    //                     color: 'black'
                    //                 }
                    //             }
                    //         }
                    //     }
                    // },
                    {
                        name: '站内数',
                        type: 'bar',
                        data: runQty,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'inside',
                                    textStyle: {
                                        color: 'black'
                                    }
                                }
                            }
                        }
                    },
                    {
                        name: '出站数',
                        type: 'bar',
                        data: outQty,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'inside',
                                    textStyle: {
                                        color: 'black'
                                    }
                                }
                            }
                        }
                    },
                    {
                        name: '达成率',
                        type: 'line',
                        data: yield,
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: '{c}%',
                                    textStyle: {
                                        color: '#000'
                                    }
                                }
                            }
                        }
                    },
                    {
                        name: '返工率',
                        type: 'line',
                        data: reworkYield,
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: '{c}%',
                                    textStyle: {
                                        color: '#000'
                                    }
                                }
                            }
                        }
                    },
                    {
                        name: '报废率',
                        type: 'line',
                        data: scrapYield,
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: '{c}%',
                                    textStyle: {
                                        color: '#000'
                                    }
                                }
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option, true);
        }

        /**
         * 每日比率
         * @Author Ivan
         * @Date 2019/6/27
         */
        var yieldByDayChart = function () {
            var myChart = echarts.init(document.getElementById("yieldByDayChart"));
            var stepList = [];
            var dateList = [];
            <g:each in="${dateList}" status="i" var="dataInstance">
            dateList.push("${dataInstance.TRANS_TIME}");
            </g:each>
            <g:each in="${report_011}" status="i" var="dataInstance">
            stepList.push("${dataInstance.GD_STEP_DESC}");
            </g:each>
            var option = {
                title: {
                    text: '每日比率'
                },
                legend: {
                    data: stepList
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    name: '日期',
                    show: true,
                    type: 'category',
                    data: dateList,
                    axisLabel: {
                        rotate: 45,
                        show: true,
                        textStyle: {
                            color: '#3A82B9'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3A82B9',
                            width: 2
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '比率',
                        show: true,
                        interval: 5,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#3A82B9',
                                width: 2
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#3A82B9'
                            },
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    <g:each in="${report_011}" status="i" var="headInstance">
                    {
                        name: '${headInstance.GD_STEP_DESC}',
                        type: 'line',
                        data: ${yieldByDayChart["${headInstance.GD_STEP_DESC}"]},
                    },
                    </g:each>
                ]
            };
            myChart.setOption(option, true);
        }

        /**
         * 每日返工率
         * @Author Ivan
         * @Date 2019/6/27
         */
        var reworkYieldByDayChart = function () {
            var myChart = echarts.init(document.getElementById("reworkYieldByDayChart"));
            var stepList = [];
            var dateList = [];
            <g:each in="${dateList}" status="i" var="dataInstance">
            dateList.push("${dataInstance.TRANS_TIME}");
            </g:each>
            <g:each in="${report_011}" status="i" var="dataInstance">
            stepList.push("${dataInstance.GD_STEP_DESC}");
            </g:each>
            var option = {
                title: {
                    text: '每日返工率'
                },
                legend: {
                    data: stepList
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    name: '日期',
                    show: true,
                    type: 'category',
                    data: dateList,
                    axisLabel: {
                        rotate: 45,
                        show: true,
                        textStyle: {
                            color: '#3A82B9'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3A82B9',
                            width: 2
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '比率',
                        show: true,
                        interval: 5,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#3A82B9',
                                width: 2
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#3A82B9'
                            },
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    <g:each in="${report_011}" status="i" var="headInstance">
                    {
                        name: '${headInstance.GD_STEP_DESC}',
                        type: 'line',
                        data: ${reworkYieldByDayChart["${headInstance.GD_STEP_DESC}"]},
                    },
                    </g:each>
                ]
            };
            myChart.setOption(option, true);
        }

        /**
         * 每日报废率
         * @Author Ivan
         * @Date 2019/6/27
         */
        var scrapYieldByDayChart = function () {
            var myChart = echarts.init(document.getElementById("scrapYieldByDayChart"));
            var stepList = [];
            var dateList = [];
            <g:each in="${dateList}" status="i" var="dataInstance">
            dateList.push("${dataInstance.TRANS_TIME}");
            </g:each>
            <g:each in="${report_011}" status="i" var="dataInstance">
            stepList.push("${dataInstance.GD_STEP_DESC}");
            </g:each>
            var option = {
                title: {
                    text: '每日报废率'
                },
                legend: {
                    data: stepList
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    name: '日期',
                    show: true,
                    type: 'category',
                    data: dateList,
                    axisLabel: {
                        rotate: 45,
                        show: true,
                        textStyle: {
                            color: '#3A82B9'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3A82B9',
                            width: 2
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '比率',
                        show: true,
                        interval: 5,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#3A82B9',
                                width: 2
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#3A82B9'
                            },
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    <g:each in="${report_011}" status="i" var="headInstance">
                    {
                        name: '${headInstance.GD_STEP_DESC}',
                        type: 'line',
                        data: ${scrapYieldByDayChart["${headInstance.GD_STEP_DESC}"]}
                    },
                    </g:each>
                ]
            };
            myChart.setOption(option, true);
        }

        $(function () {
            dataChart();
            yieldByDayChart();
            reworkYieldByDayChart();
            scrapYieldByDayChart();
        });
    </script>
</g:if>
<g:else>
    <g:render template="../template/emptyPanel"/>
</g:else>